<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
            	
            	
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                
                <title>Image Processing</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/theme.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

			<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#image").hide();
					$("#video").show();
					$("#downImage").hide();
					$("#downVideo").show();
					
				  $("#uploadVideo").click(function(){
					  $("#image").hide();
					  $("#video").show();
					  $("#downImage").hide();
					  $("#downVideo").show();
				  });
				  
				  $("#uploadImage").click(function(){
					  $("#video").hide();
					  $("#image").show();
					  $("#downImage").show();
					  $("#downVideo").hide();
				  });
				});
			</script>
            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>
        </h:head>


        <h:body>
            <p:layout fullPage="true" >
				
                <p:layoutUnit id="top" position="north" size="70">
					<h:form>
                    <p:menubar autoSubmenuDisplay="true">
                    
                        <p:submenu label="File" icon="ui-icon-document">
                            <p:submenu label="New" icon="ui-icon-contact">
                                <p:menuitem value="Project" url="#" helpText="CTRL+N" />
                                <p:menuitem value="Other" url="#" helpText="CTRL+O"/>
                            </p:submenu>
                            
                            <p:menuitem value="Open" url="#"  />
                            
                            <p:menuitem value="Quit" url="#" />
                        </p:submenu>
						
                        <p:submenu label="Edit" icon="ui-icon-pencil">
                            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" helpText="CTRL+Z"></p:menuitem>
                            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" helpText="CTRL+Y"></p:menuitem>
                        </p:submenu>

                        <p:submenu label="Help" icon="ui-icon-help">
                            <p:menuitem value="Image" url="#" id = "imageShow" />
                            <p:menuitem value="Video" url="#" id = "videoShow" />
                            <p:submenu label="Search" icon="ui-icon-search">
                                <p:submenu label="Text">
                                    <p:menuitem value="Workspace" url="#" />
                                </p:submenu>
                                <p:menuitem value="File" url="#" />
                            </p:submenu>
                        </p:submenu>
                        
                    </p:menubar>
                    </h:form>
                </p:layoutUnit>
				
                <p:layoutUnit id="bottom" position="south" size="40">
                	
                    <h:outputLink>
						Welcome to Use the System of the image processing
                    </h:outputLink>

                    <br />
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="200" resizable="true" closable="true" collapsible="true" header="Options" minSize="200">
                    <p:accordionPanel>
                        <p:tab title="Upload">
							<h:form enctype="multipart/form-data">  
  								<div id = "uploadImage">
							    <p:fileUpload fileUploadListener="#{fileUploadController.uploadImage}"  
							            mode="advanced" 
							            auto="true"  
							            update=":centerForm:uploadedFile,:fileName,:fileType,:fileWidth,:fileHeight"  
							            sizeLimit="10000000"   
							            allowTypes="/(\.|\/)(gif|jpe?g|png|bmp|JPE?G|BMP|PNG|GIF|tif)$/" />
							    </div>       
							</h:form>
                        </p:tab>

                        <p:tab title="Image Enhance">
                        	<h:panelGrid style="margin-bottom:10px">  
						        <p:inputText id="enhanceParam" value="#{imageEnhanceController.enhanceParam}" width = "30" />  
						        <p:slider for="enhanceParam">  
						            <p:ajax event="slideEnd" listener="#{imageEnhanceController.enhanceImage}" update=":centerForm:enhanceImage,:downloadForm:downloadLink" />  
						        </p:slider>  
						    </h:panelGrid> 
                            
                        </p:tab>

                        <p:tab title="Image Encrypt">
                        	<h:form>
	                            <p:commandButton value="encryptImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="encrypt"  
		             			actionListener="#{imageEnhanceController.encryptImage}" styleClass="ui-priority-primary"/>
								<p:commandButton value="decryptImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="decrypt"  
	             				actionListener="#{imageEnhanceController.decryptImage}" styleClass="ui-priority-primary"/>
	             			</h:form>
	             			
                        </p:tab>
                        <p:tab title="Image Operating">
                        	<h:form>
		             			<p:commandButton value="Gray   Image" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="gray" style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageGray}" styleClass="ui-priority-primary"/>
		             			<p:commandButton value="EdgeImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="edge"  style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageEdge}" styleClass="ui-priority-primary"/>
		             			<p:commandButton value="SharpenImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="sharpen"  style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageSharpen}" styleClass="ui-priority-primary"/>
		             			<p:commandButton value="BlursImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="blurs"  style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageBlurs}" styleClass="ui-priority-primary"/>
		             			<p:commandButton value="AnaglyphImage" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="anaglyph"  style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageAnaglyph}" styleClass="ui-priority-primary"/>
		             			<p:commandButton value="edgeDetect" update=":centerForm:enhanceImage,:downloadForm:downloadLink" id="edgeDetect"  style = "width:140px"
		             			actionListener="#{imageEnhanceController.enhanceImageEdgeDetect}" styleClass="ui-priority-primary"/>
	             			</h:form>
	             			
                        </p:tab>
                        
                        <p:tab title="Video Upload" >
							<h:form enctype="multipart/form-data">  
  								<div id = "uploadVideo">
							    <p:fileUpload fileUploadListener="#{fileUploadController.uploadVideo}"  
							    		
							            mode="advanced" 
							            auto="true"  
							            update=":centerForm:uploadedVideo,:filePath"  
							            sizeLimit="100000000"   
							            allowTypes="/(\.|\/)(avi)$/" />
							    </div>
							            
							</h:form>
                        </p:tab>
                        
                         <p:tab title="Video Enhance">
							<h:form>
	                            <p:commandButton value="enhanceVideo" update=":centerForm:ehanceVideo,:enhanceFilePath" id="enhance"  
		             			actionListener="#{videoEncryptController.enhanceVideo}" styleClass="ui-priority-primary"/>
		             			
	             			</h:form>
                        </p:tab>
                        
                        <p:tab title="Video Encrypt">
							<h:form>
	                            <p:commandButton value="encryptVideo" update=":centerForm:ehanceVideo,:enhanceFilePath" id="encrypt"  
		             			actionListener="#{videoEncryptController.encryptVideo1}" styleClass="ui-priority-primary"/>
		             			
	             			</h:form>
                        </p:tab>
                       
                        
                        <p:tab title="Video Decrypt">
							<h:form>
	                            <p:commandButton value="decryptVideo" update=":centerForm:ehanceVideo,:enhanceFilePath" id="encrypt"  
		             			actionListener="#{videoEncryptController.decryptVideo}" styleClass="ui-priority-primary"/>
		             			
	             			</h:form>
                        </p:tab>
                        
                        
                    </p:accordionPanel>
                </p:layoutUnit>

                <p:layoutUnit id="right" position="east" size="240" header="Gallery" resizable="true" closable="true" collapsible="true"
                              style="text-align:center">

                    <p:calendar value="#{calendarBean.date1}" mode="inline" id="inlineCal"/>
                 
		            <p:panel header="File Information">  
				        <h:panelGrid columns="2" id = "fileInfo">  
				            <h:outputText value="FileName" />  
				            <p:inputText id="fileName" value="#{fileUploadController.userBean.oriImage.name}"  width = "50" readonly = "true"/>  
				  
				  			<h:outputText value="FileType " />  
				            <p:inputText id="fileType" value="#{fileUploadController.userBean.oriImage.contentType}"  /> 
				            
				            <h:outputText value="Width: " />  
				            <p:inputText id="fileWidth" value="#{fileUploadController.userBean.oriImage.width}" /> 
				            
				            <h:outputText value="Height: " />  
				            <p:inputText id="fileHeight" value="#{fileUploadController.userBean.oriImage.height}" />
				            
				            <h:outputText value="Path: " />  
				            <p:inputText id="filePath" value="#{userBean.oriPath}" />
				            
				            <h:outputText value="Enhance Path: " />  
				            <p:inputText id="enhanceFilePath" value="#{userBean.enchancePath}" />
				        </h:panelGrid>  
				    </p:panel>
				    <h:form id = "downloadForm">
				    	<div id = "downImage">
	                    <p:commandButton id="downloadLink" value="Image Download" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"   
				        	icon="ui-icon-arrowthichk-s">  
					    		<p:fileDownload value="#{imageEnhanceController.downloadImage}" />  
						</p:commandButton>
						</div>
						<div id = "downVideo">
						<p:commandButton id="videodownloadLink" value="Video Download" ajax="false" actionListener="#{videoEncryptController.downEnhanceVideo}"  
				        	icon="ui-icon-arrowthichk-s">  
					    		<p:fileDownload value="#{videoEncryptController.enhanceVideo}" />  
						</p:commandButton>
						</div>
						
					</h:form>
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center" widgetVar="center">
                    <h:form id = "centerForm" >
                    	<div id = "video">
                    	<p:media id = "uploadedVideo" value="#{userBean.oriPath}" width="400" height="400">  
						</p:media> 
						<p:media id = "ehanceVideo"  value="#{userBean.enchancePath}" width="400" height="400">  
						</p:media> 
						
						</div>
						<div id = "image">
						<p:graphicImage id = "uploadedFile" value="#{fileUploadController.userBean.oriImage.imageStream}" width = "400" height = "400"/>
						<p:graphicImage id = "enhanceImage" value="#{imageEnhanceController.enhanceImage}" width = "400" height = "400"/>
						</div>
						
                    </h:form>


                </p:layoutUnit>

            </p:layout>

            <p:dialog header="Basic Dialog" widgetVar="dlg1" modal="true">
                <h:outputText value="Resistance to PrimeFaces is futile!" />
            </p:dialog>
		
        </h:body>

    </f:view>
</html>

